<div>
  <a href="/{{download_url}}?filepath={{value}}" target="_blank">{{filename}}</a>
  <input type="file" onchange="uploadOssFile(event);">

  <script>

    let this_dom = ()=>{
        let scripts_dom = document.getElementsByTagName ('script');
        return scripts_dom[scripts_dom.length-1];
    };

    let input_dom = this_dom().parentNode.previousElementSibling;
    let a_dom = this_dom().previousElementSibling.previousElementSibling;

    input_dom.type = "hidden";


    const getUploadUrl =  (filename, cb) => {
          fetch("/{{upload_url}}", {
              method: "POST",
              headers: {
                "Content-Type": "application/json" // 指定请求头中的内容类型为JSON
              },
              body:JSON.stringify({
                  filename,
                  field_name: '{{field_name}}', //不用尝试从此注入, 后端响应会去取这个模块, 取不到就报错了.
                  model_name: '{{model_name}}',
              }),
          }).then(resp => resp.json())
              .then(data => cb(data));
      };

    const uploadOssFile = (e) =>{
        console.log(e);
        if(e.target.files.length){
          // TODO: 增加多文件处理.
          var file = e.target.files[0];
          if(file.size > Number('{{max_upload_size}}')){
              alert('文件太大了, 这里允许上传最大附件尺寸为{{max_upload_size}}kb');
              // TODO: 看看临时授权url是否能再限制一次尺寸.
            }
          let filename = file.name;
          // 第一步, 拿到授权url
          getUploadUrl(filename, data => {
              console.log("拿到url");
              console.log(data);
              a_dom.innerHTML = "正在向oss上传文件, 不要关闭窗口也不要点保存.";
              // 第二步, 向oss 上传文件
              fetch (data.url, {
                method: 'PUT',
                body: file,
              })
                .then (response => response.text()) // 如果响应是一个JSON对象，就解析它
                .then (_ => {
                    console.log ("upload to oss success");
                    // 第三部, 修改本地input
                    input_dom.value = data.value;
                    a_dom.innerHTML = data.value;
                    a_dom.href = '{{download_prefix}}'+data.value;
                }) // 处理成功的响应对象
                .catch (error => console.log (error)); // 处理错误的响应对象

          });
        }
    }
  </script>
</div>
